<!--巡查发现问题考核统计-->
<style lang="less">
.count {
  margin: 15px;
  .white {
    display: flex;
    align-items: center;
  }
  .smallForm {
    display: inline-block;
  }
  .formItem {
    width: 200px;
  }
  .mr20 {
    margin-right: 20px;
  }
  .ivu-table td,
  .ivu-table th {
    height: 35px !important;
  }
}
.user-count {
  .ivu-modal-body {
    margin-bottom: 15px !important;
  }
}

// 表格容器
.table-container {
  overflow: hidden;
}

// 数据列项说明
.table-explain {
  margin-top: 15px;
  padding: 16px;
}
.explain-title {
  font-size: 16px;
  font-weight: bold;
}
.explain-text {
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: 2px;
  p {
    padding-left: 8px;
  }
}
.bold-text {
  font-weight: bold;
}

// 特殊行
.ivu-table .main-rows td {
  background-color: gold !important;
}

// 表体
.problem-table .ivu-table .ivu-table-body {
  max-height: 400px;
  overflow: auto;
}

</style>

<template>
  <div class="count">
        <Card :bordered="false">
        <p slot="title"
            class="white">统计分析 > <span class="select-font">巡查发现问题考核统计</span></p>
        <div>
            <Form :model="searchItem"
                class="smallForm">
            <!-- 行政区域 -->
            <area-select @getData="getAreaData"
                       style="width: 200px;margin-right: 30px"></area-select>
            <!-- 选择时间 -->
            <DatePicker type="year"
                      :value="searchItem.year"
                      :options="dateOptions"
                      @on-change="changeTime"
                      placeholder="请选择时间"
                      style="width: 200px;margin-right: 30px"></DatePicker>
            <!-- 选择季度 -->
            <Select v-model="searchItem.quarter"
                    style="width:200px"
                    placeholder="请选择季度">
              <Option v-for="item in quarterList"
                      :value="item.value"
                      :key="item.value">{{ item.label }}</Option>
            </Select>
        </Form>
        <Button type="info"
                style="margin-left:25px"
                @click="getData()">搜索</Button>
        <Button type="primary"
                style="margin-left:25px"
                @click="exportAllData(1)">导出数据</Button>
      </div>
    </Card>
    <!-- 列表 -->
    <div class="table-container">
        <Col span="24">
        <Table :data="countData"
                :columns="countColumns"
                :row-class-name="rowClassName"
                stripe
                class="problem-table"></Table>
        </Col>
    </div>
    <!-- 列项说明 -->
    <div class="table-explain">
      <div class="explain-title">列项说明：</div>
      <div class="explain-text">（1）镇街河长数：本镇街范围内，系统已有河长数，本季度用户数计算来源于“用户管理”。</div>
      <div class="explain-text">（2）未发现问题河长数：本季度时间范围内，<span class="bold-text">未提交过河流事件</span>的村、镇河长数。</div>
      <div class="explain-text">（3）发现问题河长数：本季度时间范围内，<span class="bold-text">有提交河流事件且能对应到巡河记录</span>的村、镇河长数。</div>
      <div class="explain-text">（4）发现问题频率：（本季度时间范围内发现问题村、镇河长数 ÷ 本季度内的总河长数）×100%。</div>
      <div class="explain-text">（5）发现问题扣分：根据计算得出的百分率，结合考核文档，得出需扣除的分数。</div>
      <div class="explain-text">（6）已处理问题数（<span class="bold-text">延后16天</span>）：事件上报时间在<span class="bold-text">本季度范围内 且事件处理时间在本季度延后16个工作日</span>的已处理问题数。（即季度内上报事件，在规定时间内完成未超时）<p>eg：2021年3月31日上报的事件，2021年4月23日之前处理完毕，该事件纳入第一季度统计范畴内。</p></div>
      <div class="explain-text">（7）发现问题数：本季度内已上报系统的事件数。</div>
      <div class="explain-text">（8）发现问题处理率：（已处理问题数 ÷ 发现问题数）×100%。</div>
      <div class="explain-text">（9）发现问题处理扣分：根据计算得出的百分率，结合考核文档，得出需扣除的分数。</div>
      <div class="explain-text">（10）总扣分：发现问题需扣除的分数+问题处理需扣除的分数。</div>
      <div class="explain-text">【镇街河长数、未发现问题河长数、已发现问题河长数、发现问题数，都将在季度末立即生成历史表单；已完成问题数，将在季度结束后16个工作日生成历史表单。下一季度考核数据变动，不影响以往季度的数据。】</div>
    </div>
    <!-- 总扣分 -->
    <Modal class="user-count"
           v-model="scoreModal"
           :mask-closable="false"
           title="扣分规则"
           width="1200">
           <Table ref="table"
             :data="scoreData"
             :columns="scoreColumns"
             stripe></Table>
    </Modal>
    <!-- 表头-总扣分 -->
    <Modal class="user-count"
           v-model="scoreDetailModal"
           :mask-closable="false"
           title="扣分规则"
           width="1200">
           <Table ref="table"
             :data="scoreDetailData"
             :columns="scoreDetailColumns"></Table>
    </Modal>
    <!-- 未发现问题河长数 -->
    <Modal class="user-count"
           v-model="nfindersModal"
           :mask-closable="false"
           title="河长信息">
      <Table ref="table"
             :data="nfindersData"
             :columns="nfindersColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="nfindersPage.total"
            :current="nfindersPage.current"
            :page-size="nfindersPage.pageSize"
            ref="page"
            size="small"
            show-total
            @on-change="changeNfindersPage"></Page>
    </Modal>
    <!-- 已处理问题数（延后16天） -->
    <Modal class="user-count"
           v-model="solvedModal"
           :mask-closable="false"
           title="查看事件"
           width="1400">
      <Table ref="table"
             :data="solvedData"
             :columns="solvedColumns"
             stripe></Table>
      <div slot="footer">
        <Button type="success"
                @click="exportEventData">导出数据</Button>
        <Button @click="solvedModal = false">取消</Button>
      </div>
      <Page class="pull-right"
            :total="solvedPage.total"
            :current="solvedPage.current"
            :page-size="solvedPage.pageSize"
            ref="page"
            size="small"
            show-total
            @on-change="changeSolvedPage"></Page>
    </Modal>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import areaSelect from 'public/areaSelect';
import { domain2 } from 'global/setting';

export default {
  components: {
    'area-select': areaSelect,
  },
  data() {
      return {
          urlCheck: '/stat/chiefs/reportcheckstat',
          urlReport: '/stat/chiefs/reportcheckstatxml',
          nfindersTotal: 0,
          scoreModal: false,
          scoreDetailModal: false,
          nfindersModal: false,
          solvedModal: false,
          searchItem: {
              area: {},
              year: '',
              quarter: ''
          },
          Page: {
            current: 1,
            pageSize: 10,
            total: 0,
          },
          nfindersPage: {
            current: 1,
            pageSize: 10,
            total: 0,
          },
          solvedPage: {
            current: 1,
            pageSize: 10,
            total: 0,
          },
          dateOptions: {
            disabledDate (date) {
              return date.getFullYear() < 2021;
            }
          },
          // 季度列表
          quarterList: [
            {
              value: '1',
              label: '第一季度',
            },
            {
              value: '2',
              label: '第二季度',
            },
            {
              value: '3',
              label: '第三季度',
            },
            {
              value: '4',
              label: '第四季度',
            },
          ],
          typeList: ['村级河长', '镇级河长', '区级河长', '市级河长', '河长办经办人/河长办/河长办人员', '职能人员/职能用户', '市级河长助理', '河长办负责人', '河长办人员/河长办经办人', '河长助理'],
          countData: [],
          countColumns: [
              {
                title: '镇街',
                align: 'center',
                key: 'town',
              },
              {
                title: '镇街河长数',
                align: 'center',
                key: 'users_count',
              },
              {
                title: '未发现问题河长数',
                align: 'center',
                key: '',
                render: (h, params) => {
                  return h(
                    'div',
                    {
                      style: {
                        cursor: 'pointer',
                      },
                      on: {
                        click: () => {
                          this.nfindersModal = true;
                          if (params.row.nfinders && params.row.nfinders.length > 0) {
                            this.nfindersResult = params.row.nfinders; // 保存数据
                            this.nfindersPage.current = 1;
                            this.nfindersPage.total= this.nfindersResult.length;
                            this.nfindersData = this.nfindersResult.slice(0, 10); // 截取前10条数据
                          } else {
                            this.nfindersData = [];
                          }
                        },
                      },
                    },
                    params.row.nfinders_count
                  );
                },
              },
              {
                title: '发现问题河长数',
                align: 'center',
                key: 'finders_count',
              },
              {
                title: '发现问题频率',
                align: 'center',
                key: 'find_frequency',
              },
              {
                title: '发现问题扣分',
                align: 'center',
                key: 'find_frequency_deduct_score',
              },
              {
                title: '已处理问题数(延后16天)',
                align: 'center',
                key: 'solved_count',
                render: (h, params) => {
                  return h(
                    'div',
                    {
                      style: {
                        cursor: 'pointer',
                      },
                      on: {
                        click: () => {
                          this.solvedModal = true;
                          if (params.row.solved_reports && params.row.solved_reports.length > 0) {
                            let newData = params.row.solved_reports.map(item => { // 改造数据
                              if (item.user_type == '1') {
                                item.come = '微信投诉';
                              } else if (item.user_type == '2') {
                                item.come = '河长事件';
                              } else if (item.user_type == '3') {
                                item.come = '电话信访';
                              }
                              return item;
                            });
                            this.solvedResult = newData.sort(this.compareTime); // 保存排序后的数据
                            this.solvedPage.current = 1;
                            this.solvedPage.total = this.solvedResult.length;
                            this.solvedData = this.solvedResult.slice(0, 10); // 截取前10条数据
                          } else {
                            this.solvedData = [];
                          }
                        },
                      },
                    },
                    params.row.solved_count
                  );
                },
              },
              {
                title: '发现问题数',
                align: 'center',
                key: 'reports_count',
              },
              {
                title: '发现问题处理率',
                align: 'center',
                key: 'solve_frequency',
              },
              {
                title: '发现问题处理扣分',
                align: 'center',
                key: 'solve_frequency_deduct_score',
              },
              {
                title: '总扣分',
                align: 'center',
                key: 'deduct_score',
                render: (h, params) => {
                  // 合计行有 is_statis_line 字段
                  if(params.row.is_statis_line){
                    return h(
                      'div',
                      params.row.deduct_score
                    );
                  }else{
                    // 非合计行显示扣分规则
                    return h(
                      'div',
                      {
                        style: {
                          cursor: 'pointer',
                        },
                        on: {
                          click: () => {
                            this.scoreModal = true;
                            this.scoreData = params.row.deduction_items;
                          },
                        },
                      },
                      params.row.deduct_score
                    );
                  }
                },
                renderHeader: (h, index) => {
                  return h('div', [
                    h('span', '总扣分'), 
                    h('Icon', { 
                      props: { type: 'ios-help-circle-outline' },
                      style: { 
                        cursor: 'pointer', 
                        fontSize: '16px',
                        fontWeight: 'bold'
                      },
                      on: {
                        click: () => {
                          this.scoreDetailModal = true;
                        }
                      }
                    })
                  ]);
                }
              },
          ],
          // 扣分规则-列
          scoreColumns: [
            {
              title: '扣分值',
              align: 'center',
              key: 'deduct_score',
            },
            {
              title: '检查内容',
              align: 'center',
              key: 'item_name',
            },
            {
              title: '说明',
              align: 'center',
              key: 'description',
            }
          ],
          // 扣分规则-列-数据
          scoreData: [],
          // 表头-扣分规则-列
          scoreDetailColumns: [
            {
              title: '检查内容',
              key: 'name',
            },
            {
              title: '扣分标准',
              key: 'explain',
              render: (h, params) => {
                let list = params.row.explain.split('<br>');
                let content = []; 
                list.forEach(item => {
                  content.push(
                    h('p', { style: { margin: '10px 0' } },item)
                  )
                })
                return h('div', content)
              }
            }
          ],
          // 表头-扣分规则-数据
          scoreDetailData: [
            { name: '巡查河湖发现问题能力（5分）。镇（街）、村级河长湖长巡查河湖时是否发现问题。', explain: '80%（含）-90%（不含）河长湖长巡查河湖发现问题的，扣1分；<br>70%（含）-80%（不含）河长湖长巡查河湖发现问题的，扣2分；<br>60%（含）-70%（不含）河长湖长巡查河湖发现问题的，扣3分；<br>60%以下河长湖长巡查河湖发现问题的，扣5分，总扣分不超过5分。<br>以佛山市河长制信息管理系统中巡河记录为准。' },
            { name: '巡查河湖发现问题处理（5分）。镇（街）、村级河长湖长是否在规定时间内处理巡查河湖时发现的问题。', explain: '巡河发现问题处理率为90%（含）-95%（不含）的，扣1分；<br>巡河发现问题处理率为80%（含）-90%（不含）的，扣2分；<br>巡河发现问题处理率为70%（含）-80%（不含）的，扣3分；<br>巡河发现问题处理率为60%（含）-70%（不含）的，扣4分；<br>巡河发现问题处理率为60%以下的，扣5分，总扣分不超过5分。<br>以佛山市河长制信息管理系统中巡河记录为准。' }
          ],
          // 未发现问题河长数-列
          nfindersColumns: [
              {
                title: '姓名',
                align: 'center',
                key: 'realname',
              },
              {
                title: '级别',
                align: 'center',
                render: (h, params) => {
                  let type_name = this.typeList[Number(params.row.user_type)];
                  return h('div', type_name)
                }
              },
              {
                title: '职位',
                align: 'center',
                key: '',
                key: 'position',
              },
          ],
          // 未发现问题河长数-数据
          nfindersData: [],
          nfindersResult: [],
          // 已处理问题数-列
          solvedColumns: [
            {
              title: '举报编号',
              key: 'report_no',
            },
            {
              title: '河名',
              key: 'river_name',
            },
            {
              title: '状态',
              key: 'solve_is',
            },
            {
              title: '举报时间',
              key: 'report_time',
            },
            {
              title: '受理时间',
              key: 'complete_time',
            },
            {
              title: '处理时间',
              key: 'solve_time',
            },
            {
              title: '负责河长',
              key: 'chief_realname',
            },
            {
              title: '事件来源',
              key: 'come',
            },
            {
              title: '事件上报人',
              key: 'contacts',
            },
            {
              title: '描述',
              key: 'overview',
              width: 200,
            },
          ],
          // // 已处理问题数-数据
          solvedData: [],
          // 排序后的已处理问题数数据
          solvedResult: []
    }
  },
  mounted() {
    let year = new Date().getFullYear();
    this.searchItem.year = String(year);
    this.searchItem.quarter = String(Math.floor((new Date().getMonth() + 3) / 3));
    this.getData();
  },
  methods: {
    // 区域列表
    getAreaData(data) {
      this.searchItem.area = data;
    },
    // 修改时间
    changeTime(data) {
      this.searchItem.year = data;
    },
    // 表格列表
    getData() {
        let params = {
            data: {
              searchValue: {},
            },
            url: this.urlCheck,
            token: storage.session.get('token'),
            success: res => {
                this.$Loading.finish();
                this.countData = res.data.result;
            }
        }
        // 传参判断
        if(this.searchItem.area && Object.keys(this.searchItem.area).length > 0) {
          if(this.searchItem.area.level === '2') { // 区
            params.data.searchValue.area = this.searchItem.area.name;
          }else if(this.searchItem.area.level === '3') { // 镇
            params.data.searchValue.town = this.searchItem.area.name;
          }
        }
        if(this.searchItem.year) {
          params.data.searchValue.year = this.searchItem.year;
        }
        if(this.searchItem.quarter) {
          if(this.searchItem.year){
            params.data.searchValue.quarter = this.searchItem.quarter;
          }else {
            this.$Message.warning({
              content: '请选择时间',
            });
            return false;
          }
        }
        ajaxPost(params);
    },
    // 未发现问题河长数-改变页数
    changeNfindersPage(page) {
      this.nfindersPage.current = page;
      this.nfindersData = this.nfindersResult.slice(page * 10 - 10, page * 10);
    },
    // 已处理问题数-改变页数
    changeSolvedPage(page) {
      this.solvedPage.current = page;
      this.solvedData = this.solvedResult.slice(page * 10 - 10, page * 10);
    },
    // 导出数据
    exportAllData() {
        let params = {
            data: {
              searchValue: {},
            },
            token: storage.session.get('token'),
            url: this.urlReport,
            success: res => {
            if (res.data.code === '0000') {
                let url = domain2 + res.data.result;
                fetch(url).then(res =>
                res.blob().then(blob => {
                    let a = document.createElement('a');
                    let url = window.URL.createObjectURL(blob);
                    let filename = '考核统计表';
                    a.href = url;
                    a.download = filename;
                    a.click();
                    window.URL.revokeObjectURL(url);
                })
                );
            } else {
                this.$Message.warning({
                content: `${res.data.message}`,
                });
            }
            },
        }
        // 传参判断
        if(this.searchItem.area && Object.keys(this.searchItem.area).length > 0) {
          if(this.searchItem.area.level === '2') { // 区
            params.data.searchValue.area = this.searchItem.area.name;
          }else if(this.searchItem.area.level === '3') { // 镇
            params.data.searchValue.town = this.searchItem.area.name;
          }
        }
        if(this.searchItem.year) {
          params.data.searchValue.year = this.searchItem.year;
        }
        if(this.searchItem.quarter) {
          if(this.searchItem.year){
            params.data.searchValue.quarter = this.searchItem.quarter;
          }else {
            this.$Message.warning({
              content: '请选择时间',
            });
            return false;
          }
          
        }
        ajaxPost(params);
    },
    // 已处理问题数-导出数据
    exportEventData() {
      let columns = JSON.parse(JSON.stringify(this.solvedColumns));
      this.$refs.table.exportCsv({
        filename: '事件数据',
        columns,
        data: this.solvedResult,
        quoted: true,
      });
    },
    // 时间排序
    compareTime(a, b) {
      return (new Date(b['report_time']) - new Date(a['report_time']));
    },

    // 表格特殊行颜色
    rowClassName (row, index) {
        if (row.is_statis_line) {
            return 'main-rows';
        }
        return '';
    }
  },
}
</script>